隨著手機、平板等各種裝置的普及，網頁不再只在電腦螢幕上顯示。一個好的網頁應該能在所有裝置上都能正常瀏覽，這就是響應式網頁設計（Responsive Web Design, RWD）。
要實現 RWD，必須先告訴瀏覽器，網頁的寬度應該等於裝置的寬度。這需要在 <head> 標籤中加上一個 meta 標籤：<meta name="viewport" content="width=device-width, initial-scale=1.0">
width=device-width： 告訴瀏覽器，網頁寬度應該與裝置的寬度一致，而不是預設的桌面寬度。
initial-scale=1.0： 確保網頁在載入時不會被縮放。
沒有這行程式碼，手機瀏覽器可能會把網頁當作桌面版，然後再縮小，導致文字和圖片變得非常小。有了它，瀏覽器就會以正常比例呈現。
在 index.html 中：
HTML
<!DOCTYPE html>
<html lang="zh-Hant">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我的網頁設計作品集</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
</body>
</html>
打開目前的作品集網頁，在 <head> 中加上這行程式碼。然後使用瀏覽器的開發者工具，切換到手機模式，會發現網頁已經可以適應手機的寬度了。雖然排版可能還需要調整，但這是 RWD 的重要第一步！
執行成果 :
iThome鐵人賽
看影片追技術